<template>
  <div class="DialogAlarm">
    <el-dialog
      class="dialog_alarm"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      @open="dialogOpen"
      @opened="dialogOpened"
      @closed="dialogClosed"
    >
      <div class="dialog_body">
        <div class="dialog_body_item dialog_body_left">
          <div class="body_item_title">
            <el-button
              type="text"
              @click="dialog_prev()"
              :disabled="alarmData.singleCheckAlarmNum <= 0"
            >上一条</el-button>
          </div>
          <div class="body_header">
            <span>点位信息:</span>
            <span>{{alarmData.singleCheckAlarm.point ? alarmData.singleCheckAlarm.point.name : ''}}</span>
          </div>
          <div id="body-content" class="body_content">
            <ul>
              <li>
                <div
                  class="first-area"
                  v-if="alarmData.singleCheckAlarm.point && (alarmData.singleCheckAlarm.point.saveTypeId == 2 || alarmData.singleCheckAlarm.point.saveTypeId == 4)"
                >
                  <div
                    class="item-name"
                  >{{alarmData.singleCheckAlarm.point ? alarmData.singleCheckAlarm.point.name : ''}}可见光</div>
                  <img
                    class="item-img"
                    :src="isCanOperation ? alarmData.singleCheckAlarm.cameraPic && alarmData.singleCheckAlarm.cameraPic.length> 0 ? alarmData.singleCheckAlarm.cameraPic : '../../../static/resources/images/infrared.png' : alarmData.singleCheckAlarm.pointHistory && alarmData.singleCheckAlarm.pointHistory.cameraPic.length> 0 ? alarmData.singleCheckAlarm.pointHistory.cameraPic : '../../../static/resources/images/infrared.png'"
                    alt
                  />
                </div>
                <div
                  class="second-area"
                  v-if="alarmData.singleCheckAlarm.point && (alarmData.singleCheckAlarm.point.saveTypeId == 1 || alarmData.singleCheckAlarm.point.saveTypeId == 4)"
                >
                  <div
                    class="item-name"
                  >{{alarmData.singleCheckAlarm.point ? alarmData.singleCheckAlarm.point.name : ''}}红外</div>
                  <img
                    class="item-img"
                    :src="isCanOperation ?  alarmData.singleCheckAlarm.flirPic && alarmData.singleCheckAlarm.flirPic.length> 0 ? alarmData.singleCheckAlarm.flirPic : '../../../static/resources/images/infrared.png' : alarmData.singleCheckAlarm.pointHistory && alarmData.singleCheckAlarm.pointHistory.flirPic.length> 0 ? alarmData.singleCheckAlarm.pointHistory.flirPic : '../../../static/resources/images/infrared.png'"
                    alt
                  />
                </div>
              </li>
              <li v-for="item in alarmData.relationPoint" :key="item.id">
                <div
                  class="first-area"
                  v-if="item.point && (item.point.saveTypeId == 2 || item.point.saveTypeId == 4)"
                >
                  <div class="item-name">{{item.point ? item.point.name : ''}}可见光</div>
                  <img
                    class="item-img"
                    :src="item && item.cameraPic.length> 0 ? item.cameraPic : '../../../static/resources/images/infrared.png'"
                    alt
                  />
                </div>
                <div
                  class="second-area"
                  v-if="item.point && (item.point.saveTypeId == 1 || item.point.saveTypeId == 4)"
                >
                  <div class="item-name">{{item.point ? item.point.name : ''}}红外</div>
                  <img
                    class="item-img"
                    :src="item && item.flirPic.length> 0 ? item.flirPic : '../../../static/resources/images/infrared.png'"
                    alt
                  />
                </div>
              </li>
            </ul>
          </div>
          <div class="body_content_audio" :style="'display: none'">
            <div class="item-name">音频文件</div>
            <div class="aduio_consist">
              <!-- :src="'http://www.alexkatz.me/codepen/music/interlude.mp3'" -->
              <audio
                id="djPlayer"
                ref="audio"
                :src="alarmData.singleCheckAlarm.pointHistory ? alarmData.singleCheckAlarm.pointHistory.soud : 'http://www.alexkatz.me/codepen/music/interlude.mp3'"
                @loadedmetadata="onLoadedmetadata"
                :preload="true"
                @timeupdate="onTimeupdate"
                :loop="playLoop"
              >浏览器不支持</audio>
              <el-button class="audio_p" type="text" @click="button_play()">
                <i class="play_icon" :class="this.showPause == true ? 'pause_icon' : ''"></i>
              </el-button>
              <el-button class="audio_s" type="text" @click="button_stop()">
                <i class="stop_icon"></i>
              </el-button>
              <div class="player_consist">
                <el-slider
                  class="player_slider"
                  @change="slider_change"
                  v-model="playProgress"
                  :show-tooltip="false"
                ></el-slider>
                <span class="current_time">{{transTime(currentTime)}}</span>
                <el-button class="audio_loop" type="text" @click="playLoop = !playLoop">
                  <i class="loop_icon" :class="playLoop ? 'loop_icon_s' : ''"></i>
                </el-button>
                <span id="audio_total_time" class="total_time">{{transTime(totalTime)}}</span>
              </div>
              <div class="player_volume_consist">
                <el-button class="volume_down" type="text" @click="button_volume_down()">
                  <i class="volume_down_icon"></i>
                </el-button>
                <el-progress class="volume_value" :show-text="false" :percentage="playVolume * 100"></el-progress>
                <el-button class="volume_up" type="text" @click="button_volume_up()">
                  <i class="volume_up_icon"></i>
                </el-button>
              </div>
            </div>
          </div>
          <div class="body_footer">
            <div class="item-name">阈值信息</div>
            <ul>
              <li v-for="item in pointAlarmSetting" :key="item.id">
                <div>
                  <span>{{item.name}}</span>
                  <span>{{item.value}}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="dialog_body_item dialog_body_right">
          <div class="body_item_title">
            <b>识别结果</b>
            <el-button
              type="text"
              @click="dialog_next()"
              :disabled="alarmData.singleCheckAlarmNum >= this.data.length - 1"
            >下一条</el-button>
          </div>
          <div class="body_content">
            <div>
              <div class="body_content_result">结果：</div>
              <el-radio-group v-model="alarmPointConfirm.resultStatus">
                <el-radio :label="0" :disabled="isCanOperation">正常</el-radio>
                <el-radio :label="1" :disabled="isCanOperation">
                  <span>异常：</span>
                  <el-select
                    class="result_select"
                    v-model="alarmPointConfirm.alarmTypeId"
                    placeholder="请选择"
                    :disabled="isCanOperation"
                  >
                    <el-option
                      v-for="item in alarmTypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-radio>
              </el-radio-group>
            </div>
            <el-row class="body_content_alarmLevel">
              <el-col :span="7">
                <span>告警等级:</span>
              </el-col>
              <el-col :span="16">
                <el-select
                  class="alarmLevel_select"
                  v-model="alarmPointConfirm.alarmLevel"
                  placeholder="请选择"
                  :disabled="isCanOperation"
                >
                  <el-option
                    v-for="item in alarmLevels"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
            <div class="body_content_actual_result">
              <div>实际值：</div>
              <el-radio-group v-model="alarmPointConfirm.reconStatus">
                <el-radio :label="0">正常</el-radio>
                <el-radio :label="1">
                  <span>异常：</span>
                  <el-input
                    class="actual_input"
                    placeholder="请输入内容"
                    v-model="alarmPointConfirm.modifyValue"
                    maxlength="15"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                  ></el-input>
                </el-radio>
              </el-radio-group>
            </div>
            <div class="body_content_actual_result">
              <div>意见：</div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6}"
                placeholder="请输入意见"
                v-model="alarmPointConfirm.checkDesc"
                :disabled="isCanOperation"
                maxlength="80"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogHandleCloase">取 消</el-button>
        <el-button type="primary" @click="dialogHandleConfirm(), dialogHandleCloase()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  pointHistoryRelationPoint,
  alarmTypesList,
  pointAlarmSettingList,
  pointAlarmRecordUpdate,
  updatePointHistory,
  postOperationLogs
} from "@/api/apiManagement";
import { matchArrayContent, AlarmLevel, MeterReadingDealWith} from "@/utils/constant";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";

export default {
  name: "DialogAlarm",
  props: {
    dialogTitle: {
      type: String
    },
    data: {
      type: [Array],
      required: true
    },
    row: {
      required: true
    },
    isCanOperation: {
      type: Boolean
    }
  },
  data() {
    return {
      dialogVisible: false,
      alarmLevels: AlarmLevel,
      alarmData: {
        singleCheckAlarmNum: -1,
        singleCheckAlarm: {},
        checkAlarm: [],
        relationPoint: []
      },
      alarmPointConfirm: {
        alarmLevel: "",
        alarmTypeId: "",
        checkDesc: "",
        reconStatus: "",
        modifyValue: "",
        resultStatus: ""
      },
      logParm: {
        taskName: "",
        pointName: ""
      },
      alarmTypes: [],
      pointAlarmSetting: [],
      totalTime: 0,
      currentTime: 0,
      playProgress: 0,
      playLoop: false,
      playVolume: 1,
      showPause: false,
      STORAGE_KEY: "todos-vuejs",
      viewer: {}
    };
  },
  mounted() {
    //
  },
  methods: {
    // 告警类型
    alerm_GetAlarmType() {
      this.alarmTypes = [];
      alarmTypesList()
        .then(response => {
          if (response) {
            this.alarmTypes = response.list;
          }
        })
        .catch(() => {});
    },
    // 设备区域
    alerm_PointHistoryRelationPoint() {
      this.alarmData.relationPoint = [];
      pointHistoryRelationPoint({
        pointId: this.alarmData.singleCheckAlarm.pointId,
        taskHistoryId: this.alarmData.singleCheckAlarm.taskHistoryId
      })
        .then(response => {
          if (response) {
            this.alarmData.relationPoint = response;
          }
        })
        .catch(() => {});
    },
    // 告警设置列表
    alerm_GetPointAlarmSettingList() {
      this.pointAlarmSetting = [];
      pointAlarmSettingList({
        pointId: this.alarmData.singleCheckAlarm.pointId
      })
        .then(response => {
          if (response) {
            let settingList = response.list;
            // 根据alarmType 拆分数组 [{alarmType 1}, {alarmType 2}, ...]  [alarmType 1](listInfo内涵上下限两个数组) = [[上限], [下限]]
            let alarmTypeList = [];
            let refTemp = 0;
            let weekThis = this;
            settingList.forEach(function(el, index) {
              if (refTemp <= 0) {
                refTemp = el.referenceTemp;
              }
              for (var i = 0; i < alarmTypeList.length; i++) {
                if (alarmTypeList[i].alarmType === el.alarmType.id) {
                  if (el.upOrDown === 1) {
                    alarmTypeList[i].listInfo[0].push(el);
                  } else {
                    alarmTypeList[i].listInfo[1].push(el);
                  }
                  return;
                }
              }
              let tmp = [];
              if (el.upOrDown == 1) {
                tmp = [[el], []];
              } else {
                tmp = [[], [el]];
              }
              alarmTypeList.push({
                alarmType: el.alarmType.id,
                listInfo: tmp
              });
            });
            // 效果图不清晰理解偏差移除注释部分逻辑
            // let resultTemp = [];
            // for (var i = 0; i < alarmTypeList.length; i++) {
            //   let item = alarmTypeList[i];
            //   let limitTop = [];
            //   let limitBottom = [];
            //   item.listInfo[0].forEach(function(el, index) {
            //     for (var i = 0; i < limitTop.length; i++) {
            //       if (limitTop[i].alarmLevel === el.alarmLevel) {
            //         limitTop[i].listInfo.push(el);
            //         return;
            //       }
            //     }
            //     limitTop.push({
            //       alarmLevel: el.alarmLevel,
            //       alarmLevelName: weekThis.matchArrayContentStr(
            //         el.alarmLevel,
            //         weekThis.alarmLevels
            //       ),
            //       listInfo: [el]
            //     });
            //   });
            //   item.listInfo[1].forEach(function(el, index) {
            //     for (var i = 0; i < limitBottom.length; i++) {
            //       if (limitBottom[i].alarmLevel === el.alarmLevel) {
            //         limitBottom[i].listInfo.push(el);
            //         return;
            //       }
            //     }
            //     limitBottom.push({
            //       alarmLevel: el.alarmLevel,
            //       alarmLevelName: weekThis.matchArrayContentStr(
            //         el.alarmLevel,
            //         weekThis.alarmLevels
            //       ),
            //       listInfo: [el]
            //     });
            //   });
            //   resultTemp.push({
            //     alarmType: item.alarmType,
            //     upOrDown: item.upOrDown,
            //     listInfo: [limitTop, limitBottom]
            //   });
            // }
            // console.log("*************", resultTemp);
            // for (var i = 0; i < resultTemp.length; i++) {
            //   let item = resultTemp[i];
            //   let typeName = "";
            //   let resultTop = [];
            //   item.listInfo[0].forEach(function(el, index) {
            //     let levelName = "";
            //     let levelValue = [];
            //     el.listInfo.forEach(function(info_el, index) {
            //       typeName = info_el.alarmType.name;
            //       levelName = el.alarmLevelName;
            //       levelValue.push(info_el.limitValue);
            //     });
            //     resultTop.push(levelName + "（" + levelValue.join(", ") + "）");
            //   });
            //   this.pointAlarmSetting.push({
            //     name: typeName + "上限",
            //     value: resultTop.join(" | ")
            //   });

            //   let resultBottom = [];
            //   item.listInfo[1].forEach(function(el, index) {
            //     let levelName = "";
            //     let levelValue = [];
            //     el.listInfo.forEach(function(info_el, index) {
            //       typeName = info_el.alarmType.name;
            //       levelName = el.alarmLevelName;
            //       levelValue.push(info_el.limitValue);
            //     });
            //     resultBottom.push(
            //       levelName + "（" + levelValue.join(", ") + "）"
            //     );
            //   });

            //   this.pointAlarmSetting.push({
            //     name: typeName + "下限",
            //     value: resultBottom.join(" | ")
            //   });
            // }

            // 效果图不清晰理解偏差修改 显示逻辑
            for (var i = 0; i < alarmTypeList.length; i++) {
              let item = alarmTypeList[i];
              let typeName = "";
              let resultTop = [];
              item.listInfo[0].forEach(function(el, index) {
                typeName = el.alarmType.name;
                let levelValue = el.limitValue;
                let levelName = weekThis.matchArrayContentStr(
                  el.alarmLevel,
                  weekThis.alarmLevels
                );
                resultTop.push(levelName + "（" + levelValue + "）");
              });
              this.pointAlarmSetting.push({
                name: typeName + "上限",
                value: resultTop.join(" | ")
              });

              let resultBottom = [];
              item.listInfo[1].forEach(function(el, index) {
                typeName = el.alarmType.name;
                let levelValue = el.limitValue;
                let levelName = weekThis.matchArrayContentStr(
                  el.alarmLevel,
                  weekThis.alarmLevels
                );
                resultBottom.push(levelName + "（" + levelValue + "）");
              });

              this.pointAlarmSetting.push({
                name: typeName + "下限",
                value: resultBottom.join(" | ")
              });
            }
            this.pointAlarmSetting.unshift({
              name: "环境信息",
              value: "环境温度：" + refTemp + "℃"
            });
          }
        })
        .catch(() => {});
    },
    // 点位告警记录模块 put
    alerm_putPointAlarmRecordUpdate() {
      let parm = {};
      if (this.alarmPointConfirm.reconStatus === 0) {
        parm = {
          alarmLevel: this.alarmPointConfirm.alarmLevel,
          alarmTypeId: this.alarmPointConfirm.alarmTypeId,
          checkDesc: this.alarmPointConfirm.checkDesc,
          reconStatus: this.alarmPointConfirm.reconStatus,
          resultStatus: this.alarmPointConfirm.resultStatus
        };
      } else {
        parm = this.alarmPointConfirm;
        parm.modifyValue =
          parm.modifyValue === "识别失败"
            ? this.alarmData.singleCheckAlarm.pointHistory.value
            : parm.modifyValue;
      }
      pointAlarmRecordUpdate(parm, this.alarmData.singleCheckAlarm.id)
        .then(response => {
          this.setOperationLogs(
            "审核-" +
              this.logParm.taskName +
              "任务-" +
              "设备告警查询确认-" +
              this.logParm.pointName
          );
          this.$message({
            message: "操作成功",
            type: "success"
          });
          // this.$emit("change", "click");
        })
        .catch(() => {});
    },
    // 点位告警记录模块 put
    alerm_updatePointHistory() {
      let parm = {};
      if (this.alarmPointConfirm.reconStatus === 0) {
        parm = {
          reconStatus: this.alarmPointConfirm.reconStatus
        };
      } else {
        parm = {
          modifyValue:
            this.alarmPointConfirm.modifyValue === "识别失败"
              ? this.alarmData.singleCheckAlarm.value
              : this.alarmPointConfirm.modifyValue,
          reconStatus: this.alarmPointConfirm.reconStatus
        };
      }
      updatePointHistory(parm, this.alarmData.singleCheckAlarm.id)
        .then(response => {
          this.setOperationLogs(
            "审核-" +
              this.logParm.taskName +
              "任务-" +
              "巡检结果浏览-" +
              this.logParm.pointName
          );

          this.$message({
            message: "操作成功",
            type: "success"
          });
          // this.$emit("change", "click");
        })
        .catch(() => {});
    },
    dialogOpen() {
      this.setDialogData(this.row);
    },
    dialogOpened() {
      const ViewerDom = document.getElementById("body-content");
      this.viewer = new Viewer(ViewerDom, {
        // 相关配置项,详情见下面
        zIndex: 99999,
        show: function() {
          this.viewer.update();
        }
      });
    },
    dialogClosed() {
      this.$emit("change", "click");
      this.viewer.destroy();
    },
    setDialogData(row) {
      this.alarmData.singleCheckAlarmNum = row;
      this.alarmData.singleCheckAlarm = this.data[
        this.alarmData.singleCheckAlarmNum
      ];
      this.alarmPointConfirm.alarmLevel = this.alarmData.singleCheckAlarm.alarmLevel;
      this.alarmPointConfirm.resultStatus =
        this.alarmData.singleCheckAlarm.resultStatus == 1 ? 1 : 0;
      if (this.alarmPointConfirm.resultStatus == 1) {
        this.alarmPointConfirm.alarmTypeId = this.alarmData.singleCheckAlarm.alarmType.id;
      } else {
        this.alarmPointConfirm.alarmTypeId = "";
      }
      if (this.isCanOperation) {
        this.alarmPointConfirm.reconStatus =
          this.alarmData.singleCheckAlarm.reconStatus == 1 ? 1 : 0;
        this.alarmPointConfirm.modifyValue =
          this.alarmPointConfirm.reconStatus == 0
            ? matchArrayContent(this.alarmData.singleCheckAlarm.value, MeterReadingDealWith) : this.alarmData.singleCheckAlarm.modifyValue;
      } else {
        this.alarmPointConfirm.reconStatus =
          this.alarmData.singleCheckAlarm.pointHistory.reconStatus == 1 ? 1 : 0;
        this.alarmPointConfirm.modifyValue =
          this.alarmPointConfirm.reconStatus == 0
            ? matchArrayContent(this.alarmData.singleCheckAlarm.pointHistory.value, MeterReadingDealWith)
            : this.alarmData.singleCheckAlarm.pointHistory.modifyValue;
      }
      this.alarmPointConfirm.checkDesc = this.alarmData.singleCheckAlarm.checkDesc;

      this.logParm.taskName = this.alarmData.singleCheckAlarm.task
        ? this.alarmData.singleCheckAlarm.task.name
        : "";
      this.logParm.pointName = this.alarmData.singleCheckAlarm.point
        ? this.alarmData.singleCheckAlarm.point.name
        : "";

      // 获取关联点信息
      this.alerm_GetAlarmType();
      this.alerm_PointHistoryRelationPoint();
      this.alerm_GetPointAlarmSettingList();
    },
    isShowDia(isVisible) {
      let self = this;
      self.dialogVisible = isVisible;
    },
    handleClose(done) {
      this.dialogHandleCloase();
      done();
    },
    dialogHandleCloase() {
      this.dialogVisible = false;
      this.dialogAudioRefresh();
    },
    dialogAudioRefresh() {
      this.$refs.audio.pause();
      this.$refs.audio.load();
      this.showPause = false;
      this.playLoop = false;
    },
    dialogHandleConfirm() {
      if (this.isCanOperation) {
        this.alerm_updatePointHistory();
      } else {
        this.alerm_putPointAlarmRecordUpdate();
      }
    },
    dialog_prev() {
      this.dialogHandleConfirm();
      this.setDialogData(this.alarmData.singleCheckAlarmNum - 1);
      this.dialogAudioRefresh();
    },
    dialog_next() {
      this.dialogHandleConfirm();
      this.setDialogData(this.alarmData.singleCheckAlarmNum + 1);
      this.dialogAudioRefresh();
    },
    button_play() {
      if (
        this.alarmData.singleCheckAlarm.pointHistory.soud == null ||
        this.alarmData.singleCheckAlarm.pointHistory.soud.length <= 0
      ) {
        return;
      }

      //改变暂停/播放icon
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
        this.showPause = true;
      } else {
        this.$refs.audio.pause();
        this.showPause = false;
      }
    },
    button_stop() {
      this.$refs.audio.pause();
      this.$refs.audio.load();
      this.showPause = false;
    },
    button_loop() {
      this.playLoop = !this.playLoop;
    },
    button_volume_down() {
      let volume = this.$refs.audio.volume * 10;
      volume = volume - 1 <= 0 ? 0 : volume - 1;
      this.playVolume = parseFloat(volume / 10.0);
      this.$refs.audio.volume = this.playVolume;
      window.localStorage.setItem(this.STORAGE_KEY, this.playVolume);
    },
    button_volume_up() {
      let volume = this.$refs.audio.volume * 10;
      volume = volume + 1 >= 10 ? 10 : volume + 1;
      this.playVolume = parseFloat(volume / 10.0);
      this.$refs.audio.volume = this.playVolume;
      window.localStorage.setItem(this.STORAGE_KEY, this.playVolume);
    },
    slider_change(val) {
      let selectedTime = (this.playProgress / 100.0) * this.totalTime;
      this.$refs.audio.currentTime = selectedTime;
    },
    onLoadedmetadata(res) {
      this.totalTime = parseInt(res.target.duration);
      this.playVolume = window.localStorage.getItem(this.STORAGE_KEY);
      if (this.playVolume === null) {
        this.playVolume = this.$refs.audio.volume;
      }
      this.$refs.audio.volume = this.playVolume;
    },
    //转换音频时长显示
    transTime(time) {
      let duration = parseInt(time);
      let minute = parseInt(duration / 60);
      let sec = (duration % 60) + "";
      let isM0 = ":";
      if (minute == 0) {
        minute = "00";
      } else if (minute < 10) {
        minute = "0" + minute;
      }
      if (sec.length == 1) {
        sec = "0" + sec;
      }
      return minute + isM0 + sec;
    },
    onTimeupdate(res) {
      this.playProgress = (res.target.currentTime / this.totalTime) * 100;
      this.currentTime = parseInt(res.target.currentTime);
    },
    // 匹配类型返回
    matchArrayContentStr(val, array) {
      return matchArrayContent(val, array);
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    }
  }
};
</script>
<style>
.DialogAlarm .el-dialog {
  background-color: rgb(215, 239, 236);
  width: 65%;
  min-width: 480px;
  padding-bottom: 2px;
}
.DialogAlarm .el-dialog__body {
  border-top: 1px solid #90e8c6;
  border-left: 1px solid #90e8c6;
  border-right: 1px solid #90e8c6;
  background-color: white;
  margin: 0px 5px;
  padding: 0px;
}
.DialogAlarm .dialog_body {
  overflow: auto;
}
.DialogAlarm .dialog_body_item {
  border: 1px solid #90e8c6;
  padding: 1px;
  font-size: 12px;
  height: 430px;
}
.DialogAlarm .dialog_body_left {
  width: calc(100% - 240px);
  border-right: none;
  float: left;
}
.DialogAlarm .dialog_body_right {
  width: 240px;
  padding: 1px;
  float: right;
}
.DialogAlarm .dialog_alarm .el-dialog__header {
  padding: 0px 5px;
}
.DialogAlarm .dialog_alarm .el-dialog__header .el-dialog__title {
  font-size: 13px;
}
.DialogAlarm .dialog_alarm .el-dialog__headerbtn {
  top: 3px;
  right: 10px;
}

.DialogAlarm .dialog_body_item .body_item_title {
  background-color: #d1e8e5;
  height: 20px;
  padding: 3px 10px;
}
.DialogAlarm .body_item_title .el-button {
  padding: 0px;
  margin-right: 0px;
  font-size: 12px;
  /* color: #606266; */
}
.DialogAlarm .dialog_body_right .body_item_title .el-button {
  float: right;
}
.DialogAlarm .dialog_body_left .body_header {
  padding: 3px 3px;
}
.DialogAlarm .body_header span {
  width: 55px;
}
.DialogAlarm .body_header span + span {
  border: 1px solid #90e8c6;
  padding: 2px;
  width: calc(100% - 55px);
  display: inline-block;
  border-radius: 2px;
}
.DialogAlarm .dialog_body_left .body_content {
  width: 100%;
  height: 290px;
  overflow: hidden;
}
.DialogAlarm .dialog_body_left .body_content ul {
  height: 100%;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
}
.DialogAlarm .dialog_body_left .body_content span {
  width: 33.3333%;
}
.DialogAlarm .dialog_body_left .body_content li {
  height: 100%;
  width: 33.3333%;
  border: 1px solid #90e8c6;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.DialogAlarm .dialog_body_left .body_content li:nth-child(n) {
  border-right: 1px solid #90e8c6;
}
.DialogAlarm .dialog_body_left .body_content .first-area,
.DialogAlarm .dialog_body_left .body_content .second-area {
  flex-grow: 0;
  overflow: hidden;
}

.DialogAlarm .dialog_body_left .body_content .item-name {
  width: 100%;
  text-align: left;
}
.DialogAlarm .dialog_body_left .item-img {
  max-width: 100%;
  max-height: calc(100% - 21px);
  /* height: calc(100% - 21px); */
}
.DialogAlarm .dialog_body_left .item-name {
  padding: 4px 3px;
  height: 21px;
  font-weight: bold;
  background: linear-gradient(
    rgb(235, 250, 250),
    rgb(175, 210, 210)
  ); /* 标准的语法 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.DialogAlarm .dialog_body_left .body_content_audio {
  height: 70px;
}
.DialogAlarm .body_content_audio .aduio_consist {
  height: calc(100% - 21px);
  overflow: hidden;
}
.DialogAlarm .body_content_audio .el-button {
  padding: 0px;
  margin-right: 0px;
  font-size: 12px;
}
.DialogAlarm .body_content_audio .player_consist,
.DialogAlarm .body_content_audio .player_volume_consist {
  height: 100%;
  float: left;
}
.DialogAlarm .body_content_audio .audio_p,
.DialogAlarm .body_content_audio .audio_s {
  float: left;
}
.DialogAlarm .body_content_audio .audio_p {
  margin-top: 10px;
  margin-left: 20px;
}
.DialogAlarm .play_icon {
  width: 30px;
  height: 30px;
  background-image: url(../../../../static/resources/images/play_player.png);
  background-size: 100% 100%;
  display: block;
}
.DialogAlarm .pause_icon {
  background-image: url(../../../../static/resources/images/play_pause.png);
}
.DialogAlarm .body_content_audio .audio_s {
  margin-top: 15px;
}
.DialogAlarm .stop_icon {
  width: 20px;
  height: 20px;
  background-image: url(../../../../static/resources/images/play_stop.png);
  background-size: 100% 100%;
  display: block;
}

.DialogAlarm .body_content_audio .player_consist {
  width: calc(100% - 405px);
  margin: 0px 10px;
  height: 100%;
}
.DialogAlarm .body_content_audio .player_slider {
  width: 100%;
  height: 25px;
}
.DialogAlarm .body_content_audio .el-slider__button-wrapper {
  visibility: hidden;
}
.DialogAlarm .player_consist .current_time {
  float: left;
}
.DialogAlarm .player_consist .total_time {
  float: right;
}
.DialogAlarm .player_consist .audio_loop {
  margin-left: calc(50% - 50px);
}
.DialogAlarm .player_consist .loop_icon_s {
  background-image: url(../../../../static/resources/images/play_loop_blue.png);
}
.DialogAlarm .loop_icon {
  width: 20px;
  height: 13px;
  background-image: url(../../../../static/resources/images/play_loop.png);
  background-size: 100% 100%;
  display: inline-block;
}
.DialogAlarm .body_content_audio .player_volume_consist {
  height: 30px;
  width: 160px;
  margin: 10px;
}
.DialogAlarm .body_content_audio .volume_up,
.DialogAlarm .body_content_audio .volume_down {
  float: left;
  width: 30px;
  height: 30px;
}
.DialogAlarm .volume_up_icon {
  width: 20px;
  height: 20px;
  background-image: url(../../../../static/resources/images/volume_up.png);
  background-size: 100% 100%;
  display: inline-block;
}
.DialogAlarm .volume_down_icon {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  background-image: url(../../../../static/resources/images/volume_down.png);
  background-size: 100% 100%;
  display: inline-block;
}
.DialogAlarm .body_content_audio .volume_value {
  width: 100px;
  float: left;
  margin: 11px 0px;
}
.DialogAlarm .dialog_body_left .body_footer {
  height: 90px;
  overflow: hidden;
}

.DialogAlarm .dialog_body_left .body_footer ul {
  width: 100%;
  height: calc(100% - 21px);
  list-style-type: none;
  padding: 5px;
  margin: 0px;
  overflow-y: auto;
  white-space: nowrap;
}
.DialogAlarm .dialog_body_left .body_footer li {
  margin-top: 6px;
}
.DialogAlarm .dialog_body_left .body_footer span {
  margin-right: 10px;
}
.DialogAlarm .dialog_body_right .body_content {
  padding: 10px;
}
.DialogAlarm .dialog_body_right .body_content_result {
  font-size: 16px;
}
.DialogAlarm .result_select {
  width: 66.6667%;
}
.DialogAlarm .dialog_body_right .el-radio-group {
  padding: 10px 0px;
}
.DialogAlarm .dialog_body_right .el-radio-group .el-radio__label {
  font-size: 12px;
}
.DialogAlarm .dialog_body_right .body_content_alarmLevel,
.DialogAlarm .dialog_body_right .body_content_actual_result {
  margin-top: 15px;
  font-weight: bold;
}
.DialogAlarm .dialog_body_right .body_content_alarmLevel {
  height: 30px;
  line-height: 30px;
}
.DialogAlarm .el-select .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.DialogAlarm .el-select .el-input__icon {
  line-height: 30px;
}
.DialogAlarm .body_content_actual_result .actual_input {
  width: 66.6667%;
}
.DialogAlarm .actual_input .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.DialogAlarm .dialog_body_right .el-textarea {
  margin: 3px 0px;
}
.DialogAlarm .dialog_alarm .el-dialog__footer {
  padding: 0px;
  margin: 5px;
  margin-top: 0px;
  border: 1px solid #90e8c6;
  border-top: none;
}
.DialogAlarm .dialog_alarm .el-dialog__footer .el-button {
  padding: 5px 25px;
  margin: 8px;
  font-size: 13px;
}
</style>

